<section class="grid_4">
	<div class="block-border"><div class="block-content">
		<h1>
			予約時間			
		</h1>
		<form class="form" action="/user/order/step3" method="get" id="order-form">
			<fieldset>
				<p>
					<label for="room-id">会議室</label>
					<?php echo $this->formSelect("room_id", NULL, NULL, $this->room_list_select)?>
				</p>
				
				<p>
					<span class="label">始め時間</span>
					 <?php echo $this->formText("start_time", $this->start_time, array("readonly"=>"true", "style"=>"width:80px"))?>
					 <input type="image" src="/images/icons/fugue/clock.png" id="start_time_btn">
				</p>
				
				<p>
					<span class="label">終わり時間</span>
					 <?php echo $this->formText("end_time", $this->end_time, array("readonly"=>"true", "style"=>"width:80px"))?>
					 <input type="image" src="/images/icons/fugue/clock.png" id="end_time_btn">
				</p>
			</fieldset>
			
			<?php echo $this->formHidden("date", $this->date)?>
			
			<fieldset class="grey-bg no-margin">
				<button type="button" id="order-btn">予約</button>
			</fieldset>
		</form>
	</div></div>
</section>

<script type="text/javascript">
	$(document).ready(function(){
		$("#order-btn").click(function(){
			if(!checkTime(true))
				return false;
			checkRoomBusy(true);
		});
	});

	function checkTime(open_dialog){
		var start_time = $("#start_time").val();
		var end_time = $("#end_time").val();

		//TODO: check time empty
		if(start_time == "" || end_time == ""){
			if(open_dialog)
				openTimeEmptyDialog();
			return false;
		}

		//TODO: check time valid
		if(start_time >= end_time){
			if(open_dialog)
				openTimeErrDialog();
			
			return false;		
		}

		//TODO: check time if date is samme with current date
		var today = $.datepicker.formatDate('yy-mm-dd', new Date());
		var date = $("#date").val();
		if(date == today){
			var current_time = getCurrentTime();
			if(start_time < current_time || end_time < current_time){
				if(open_dialog)
					openTimeErrCurrentDialog();

				return false;
			}		
		}
		
		return true;
	}

	function checkRoomBusy(){
		var room_id = $("#room_id").val();
		var start_date = $("#date").val();
		var end_date = $("#date").val();
		var start_time = $("#start_time").val();
		var end_time = $("#end_time").val();

		var order_start_time = start_date + " " + start_time;
		var order_end_time = end_date + " " + end_time;

		var ajax_url = "/user/order/check-room-busy";
		
		var datas = "room_id=" + room_id;
		datas += "&order_start_time=" + order_start_time;
		datas += "&order_end_time=" + order_end_time;
		
		jQuery.ajax({
			  url: ajax_url,
			  type: "POST",
			  data: datas,
			  success: function(data) {
				  if(data == "busy"){
					  openRoomBusyDialog();
					  return false;
				  }else{
					  $("#order-form").submit(); 
					  return true;
				  }
			  },
			  complete: function(){	
			  },
			  error: function() {
				  alert("Have error when loading data from server");
			  }
		});
	}

	function getCurrentTime(){
		var currentTime = new Date();
		var hours = currentTime.getHours();
		var minutes = currentTime.getMinutes();

		if (minutes < 10)
			minutes = "0" + minutes;
		if (hours < 10)
			hours = "0" + hours;

		return hours + ":" + minutes;
	}
	
	function openTimeEmptyDialog()
	{
		$.modal({
			content: $("#time-empty-msg").html(),
			title: '予約時間は正しくない',
			maxWidth: 500,
			buttons: {
				"閉じる": function(win) { win.closeModal(); }
			}
		});
	}

	function openTimeErrDialog()
	{
		$.modal({
			content: $("#time-err-msg").html(),
			title: '予約時間は正しくない',
			maxWidth: 500,
			buttons: {
				"閉じる": function(win) { win.closeModal(); }
			}
		});
	}

	function openTimeErrCurrentDialog()
	{
		$.modal({
			content: $("#time-err-current-msg").html(),
			title: '予約時間は正しくない',
			maxWidth: 500,
			buttons: {
				"閉じる": function(win) { win.closeModal(); }
			}
		});
	}

	function openRoomBusyDialog()
	{
		$.modal({
			content: $("#room-busy-msg").html(),
			title: '会議室が空ではない',
			maxWidth: 500,
			buttons: {
				"閉じる": function(win) { win.closeModal(); }
			}
		});
	}

	
</script>

<div id="time-empty-msg" style="display:none">
	<h3>スタート時間とエンド時間を全部選択しなければなりません。</h3>
</div>

<div id="time-err-msg" style="display:none">
	<h3>エンド時間はスタート時間の前です。</h3>
</div>

<div id="time-err-current-msg" style="display:none">
	<h3>この時間は予約できません。</h3>
</div>

<div id="room-busy-msg" style="display:none">
	<h3>この会議室はこの時間に空きではありません。</h3>
</div>